<template>
    <div class="body-inner">
        <h1 class="body-title">
            <i :class="$bodyTitle.icon"></i>
            <span>{{ $bodyTitle.description }}</span>
        </h1>
        <div class="line10"></div>
        <div class="body-main">
            <div class="timestamp">
                <div class="row">
                    <div class="title">
                        当前时间戳
                    </div>
                    <div class="input" @click="$copy(nowtime)">
                        <tips :tip="`点击复制`" :direction="'top'">
                            <input readonly type="text" v-model="nowtime">
                            <i class="copy appfont app-copy"></i>
                        </tips>
                    </div>
                    <div class="ctl">
                        <tips v-if="timestop" :tip="`点击开始`" :direction="'right'">
                            <div @click="timeloopStart" class="start appfont app-start"></div>
                        </tips>
                        <tips v-else :tip="`点击暂停`" :direction="'right'">
                            <div @click="timeloopStop" class="stop appfont app-stop"></div>
                        </tips>
                    </div>
                    <div class="input" @click="$copy(nowtimeStr)">
                        <tips :tip="`点击复制`" :direction="'top'">
                            <input readonly type="text" v-model="nowtimeStr">
                            <i class="copy appfont app-copy"></i>
                        </tips>
                    </div>
                </div>
                <div class="line20"></div>
                <div class="row">
                    <div class="title">
                        输入时间戳
                    </div>
                    <div class="input">
                        <input @input="convert1" type="text" v-model="source1" placeholder="Unix timestamp">
                    </div>
                    <div class="title center">
                        <i class="direction appfont app-right"></i>&nbsp;转时间
                    </div>
                    <div class="input" @click="$copy(result1)">
                        <tips :tip="`点击复制`" :direction="'top'">
                            <input readonly type="text" placeholder="请输入左侧时间戳" v-model="result1">
                            <i class="copy appfont app-copy"></i>
                        </tips>
                    </div>
                </div>
                <div class="line20"></div>
                <div class="row">
                    <div class="title">
                        &nbsp;
                    </div>
                    <div class="input">
                        <input @input="convertFullTime2timestamp"
                               type="text" v-model="source2.full" tabindex="1" placeholder="0000-00-00 00:00:00">
                    </div>
                </div>
                <div class="row">
                    <div class="title">
                        &nbsp;
                    </div>
                    <div class="input">
                        <input class="w4 tip" readonly type="text" placeholder="年">
                    </div>
                    <div class="input">
                        <input class="w2 tip" readonly type="text" placeholder="月">
                    </div>
                    <div class="input">
                        <input class="w2 tip" readonly type="text" placeholder="日">
                    </div>
                    <div class="input">
                        <input class="w2 tip" readonly type="text" placeholder="时">
                    </div>
                    <div class="input">
                        <input class="w2 tip" readonly type="text" placeholder="分">
                    </div>
                    <div class="input">
                        <input class="w2 tip last" readonly type="text" placeholder="秒">
                    </div>
                </div>
                <div class="row">
                    <div class="title offset2top">
                        输入时间
                    </div>
                    <div class="input">
                        <input class="w4" @input="convertPartTime2timestamp"
                               v-model="source2.Y" type="text" tabindex="2" placeholder="0000">
                    </div>
                    <div class="input">
                        <input class="w2" @input="convertPartTime2timestamp"
                               v-model="source2.m" type="text" tabindex="3" placeholder="00">
                    </div>
                    <div class="input">
                        <input class="w2" @input="convertPartTime2timestamp"
                               v-model="source2.d" type="text" tabindex="4" placeholder="00">
                    </div>
                    <div class="input">
                        <input class="w2" @input="convertPartTime2timestamp"
                               v-model="source2.H" type="text" tabindex="5" placeholder="00">
                    </div>
                    <div class="input">
                        <input class="w2" @input="convertPartTime2timestamp"
                               v-model="source2.i" type="text" tabindex="6" placeholder="00">
                    </div>
                    <div class="input">
                        <input class="w2 last" @input="convertPartTime2timestamp"
                               v-model="source2.s" type="text" tabindex="7" placeholder="00">
                    </div>
                    <div class="title offset2top center">
                        <i class="direction appfont app-right"></i>&nbsp;时间戳
                    </div>
                    <div class="input offset2top" @click="$copy(result2)">
                        <tips :tip="`点击复制`" :direction="'top'">
                            <input readonly type="text" placeholder="请输入左侧时间" v-model="result2">
                            <i class="copy appfont app-copy"></i>
                        </tips>
                    </div>
                </div>
                <div class="line20"></div>
                <div class="row">
                    <div class="title">
                        批量时间戳
                    </div>
                    <div class="textarea">
                        <textarea @input="batch2fulltime" placeholder="输入多行时间戳" v-model="batchSource"></textarea>
                        <tips class="copy-gray" :tip="`点击复制`" :direction="'top'">
                            <i @click="$copy(batchSource)" class=" appfont app-copy"></i>
                        </tips>
                        <div class="error" v-if="batchSourceError">{{ batchSourceError }}</div>
                    </div>
                    <div class="title center">
                        <i class="direction appfont app-right"></i>&nbsp;互转&nbsp;<i class="direction appfont app-back_android"></i>
                    </div>
                    <div class="textarea">
                        <textarea @input="batch2timestamp" placeholder="输入多行日期 Y-m-d H:i:s" v-model="batchTarget"></textarea>
                        <tips class="copy-gray" :tip="`点击复制`" :direction="'top'">
                            <i @click="$copy(batchTarget)" class=" appfont app-copy"></i>
                        </tips>
                        <div class="error" v-if="batchTargetError">{{ batchTargetError }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import _ from 'lodash';
import kit from '../../electron/helper/kit';

export default {
    name: 'kit_timestamp',
    data () {
        return {
            timeloopTimer   : null,
            timestop        : false,
            nowtime         : '',
            nowtimeStr      : '',
            source1         : '',
            source2         : {
                full: '',
                Y   : '',
                m   : '',
                d   : '',
                H   : '',
                i   : '',
                s   : ''
            },
            result1         : '',
            result2         : '',
            batchSource     : '',
            batchTarget     : '',
            batchSourceError: '',
            batchTargetError: ''
        };
    },
    mounted () {
        this.init();
    },
    methods: {
        init () {
            /*启动时间*/
            this.timeloopStart();
        },

        /*时间戳转时间*/
        convert1 () {
            /*强制转换为纯数字*/
            this.source1 = kit.toInt(this.source1);
            this.source1 = this.source1 || '';

            /*只保留10位数字*/
            if (this.source1.toString().length > 10) {
                this.source1 = +this.source1.toString().substring(0, 10);
            }

            /*格式化为时间 Y-m-d H:i:s*/
            this.result1 = kit.getFullTime(this.source1);
        },

        /*解析完整时间后转时间戳*/
        convertFullTime2timestamp () {
            let full = this.source2.full;

            /*清空时间戳*/
            this.result2 = '';

            /*过滤不支持的字符*/
            full = full.replace(/[^\d\-\:\s]/g, '').replace(/\s+/g, ' ');

            /*更新时间*/
            this.source2.full = full;

            /*清空分段时间*/
            this.source2.Y = '';
            this.source2.m = '';
            this.source2.d = '';
            this.source2.H = '';
            this.source2.i = '';
            this.source2.s = '';

            /*检测时间规则*/
            let test = /\d{4}\-\d{1,2}\-\d{1,2}\s\d{1,2}\:\d{1,2}\:\d{1,2}/.exec(full);
            if (!test) return;

            /*匹配出分段时间*/
            let res = /(\d{4})\-(\d{1,2})\-(\d{1,2})\s(\d{1,2})\:(\d{1,2})\:(\d{1,2})/.exec(full);
            if (!res) return;

            /*更新分段时间*/
            this.source2.Y = res[1];
            this.source2.m = res[2];
            this.source2.d = res[3];
            this.source2.H = res[4];
            this.source2.i = res[5];
            this.source2.s = res[6];

            /*转时间戳*/
            this.convertPartTime2timestamp(false);
        },

        /*时间转时间戳*/
        convertPartTime2timestamp (convertFull) {
            /*格式化*/
            let format = (n, min, max) => kit.toInt(Math.min(Math.max(kit.toInt(n), min), max).toString().replace(/[^0-9]/g, ''));

            /*时间限制*/
            this.source2.Y = format(this.source2.Y, 0, 2100);
            this.source2.m = format(this.source2.m, 0, 12);
            this.source2.d = format(this.source2.d, 0, 31);
            this.source2.H = format(this.source2.H, 0, 23);
            this.source2.i = format(this.source2.i, 0, 59);
            this.source2.s = format(this.source2.s, 0, 59);

            /*年月日为0置空*/
            if (this.source2.Y === 0) this.source2.Y = '';
            if (this.source2.m === 0) this.source2.m = '';
            if (this.source2.d === 0) this.source2.d = '';

            /*有年月日就可以转换时间戳*/
            if ((this.source2.Y === +this.source2.Y) && (this.source2.Y >= 1970) && this.source2.m && this.source2.d) {
                /*拼装完整时间*/
                let full = `${this.source2.Y}-${kit.fillZero(this.source2.m)}-${kit.fillZero(this.source2.d)} `;
                full += `${kit.fillZero(this.source2.H)}:${kit.fillZero(this.source2.i)}:${kit.fillZero(this.source2.s)}`;

                /*更新完整时间*/
                if (convertFull !== false) this.source2.full = full;

                /*转时间戳*/
                this.result2 = kit.toInt((+new Date(full)) / 1000);
            }
        },

        /*时间开始*/
        timeloopStart () {
            this.timeloopStop();
            this.timestop = false;

            /*设置当前时间*/
            let setTime = () => {
                this.nowtime    = kit.toInt((+new Date()) / 1000);
                this.nowtimeStr = kit.getFullTime(this.nowtime);
            };

            /*直接设置*/
            setTime();

            /*持续设置*/
            this.timeloopTimer = setInterval(setTime, 1000);
        },

        /*时间停止*/
        timeloopStop () {
            this.timeloopTimer && clearTimeout(this.timeloopTimer);
            this.timeloopTimer = null;
            this.timestop      = true;
        }

        /*批量转时间*/
        , batch2fulltime () {
            this.batchTargetError = '';

            let lines   = _.trim(this.batchSource).split('\n');
            let msg     = '';
            let results = [];

            /*检测合法性*/
            for (let i = 0; i < lines.length; i++) {
                let line = _.trim(lines[i]) || '';
                if (line && /^[^0][0-9]*$/.test(line) && _.inRange(line.length, 0, 11)) {
                    results.push(kit.getFullTime(line));
                }
                else {
                    msg = msg || `第${i + 1}行不是时间戳`;
                    results.push('');
                }
            }
            this.batchSourceError = msg;
            this.batchTarget      = results.join('\n');
        }

        /*批量转时间戳*/
        , batch2timestamp () {
            this.batchSourceError = '';

            let lines   = _.trim(this.batchTarget).split('\n');
            let msg     = '';
            let results = [];

            /*检测合法性*/
            for (let i = 0; i < lines.length; i++) {
                let line = _.trim(lines[i]) || '';
                if (line && /\d{4}\-\d{1,2}\-\d{1,2}\s\d{1,2}\:\d{1,2}\:\d{1,2}/.test(line)) {
                    results.push(kit.toInt((+new Date(line)) / 1000));
                }
                else {
                    msg = msg || (this.batchTarget ? `第${i + 1}行不是时间格式 Y-m-d H:i:s` : '');
                    results.push('');
                }
            }
            this.batchTargetError = msg;
            this.batchSource      = results.join('\n');
        }
    },

    beforeDestroy () {
        /*清理定时器*/
        this.timeloopStop();
    }
};
</script>

<style scoped lang="less">
.timestamp {

    .row {
        display       : flex;
        margin-bottom : 10px;

        .title {
            width           : 84px;
            flex-shrink     : 0;
            flex-grow       : 0;
            text-align      : right;
            margin-right    : 25px;
            display         : flex;
            align-items     : center;
            justify-content : flex-end;
            font-size       : 14px;

            .direction {
                font-size : 10px;
            }

            &.center {
                margin-right    : 0;
                justify-content : center;
                width           : 109px;
            }
        }

        .input, .textarea {
            display  : flex;
            position : relative;

            &:hover {
                .copy-gray {
                    display : flex;
                }
            }

            .copy {
                position        : absolute;
                z-index         : 100;
                height          : 50px;
                width           : 50px;
                top             : 0;
                right           : 0;
                display         : flex;
                align-items     : center;
                justify-content : center;
                cursor          : pointer;
                color           : rgba(255, 255, 255, 0.5);

                &:hover {
                    color : @blue;
                }
            }

            .copy-gray {
                background            : rgba(0, 0, 0, 0.3);
                position              : absolute;
                z-index               : 100;
                height                : 30px;
                width                 : 30px;
                top                   : 10px;
                right                 : 10px;
                -webkit-border-radius : 3px;
                -moz-border-radius    : 3px;
                border-radius         : 3px;
                display               : none;
                align-items           : center;
                justify-content       : center;
                cursor                : pointer;

                &:hover {
                    background : @blue;
                }
            }

            .error {
                position              : absolute;
                z-index               : 101;
                bottom                : 10px;
                left                  : 10px;
                width                 : calc(~"100% - 20px");
                background            : fade(@red, 70%);
                -webkit-border-radius : 3px;
                -moz-border-radius    : 3px;
                border-radius         : 3px;
                padding               : 3px 0;
                text-align            : center;
            }

            textarea {
                font-size             : 14px;
                height                : 130px;
                text-align            : center;
                -webkit-border-radius : 3px;
                -moz-border-radius    : 3px;
                border-radius         : 3px;
                border                : 0;
                width                 : 270px;
                color                 : #000;
                padding               : 20px;
                padding-bottom        : 40px;
            }

            input {
                height                : 50px;
                font-size             : 14px;
                text-align            : center;
                -webkit-border-radius : 3px;
                -moz-border-radius    : 3px;
                border-radius         : 3px;
                border                : 0;
                width                 : 270px;
                color                 : #000;

                &::-webkit-input-placeholder {
                    font-size : 14px;
                }

                &[type=number]::-webkit-inner-spin-button,
                &[type=number]::-webkit-outer-spin-button {
                    -webkit-appearance : none;
                }

                &.w2 {
                    width        : 35px;
                    margin-right : 5px;
                    font-size    : 14px;

                    &.last {
                        margin : 0;
                    }
                }

                &.w4 {
                    font-size    : 14px;
                    width        : 70px;
                    margin-right : 5px;
                }

                &[readonly] {
                    cursor     : pointer;
                    background : #333;
                    color      : #fff;

                    &.tip {
                        height : 25px;
                        color  : #999;
                        cursor : default;
                    }
                }
            }
        }

        .ctl {
            display         : flex;
            align-items     : center;
            justify-content : center;
            font-size       : 14px;
            flex-shrink     : 0;
            flex-grow       : 0;
            width           : 109px;

            .start, .stop {
                font-size : 25px;
                cursor    : pointer;
            }

            .start {
                color : @green;
            }

            .stop {
                color : @red;
            }
        }

        .offset2top {
            position : relative;
            top      : -50px;
        }
    }
}
</style>
